<script setup lang="jsx">
import { ref, watch } from 'vue';
import { useAntdForm, useFormRules } from '@/hooks/common/form';
import { addDictItem, updateDictItem } from '@/service/api';

const props = defineProps({
  currentRow: {
    type: Object,
    default: () => null
  },
  operateType: {
    type: String,
    default: () => null
  },
  dictType: {
    type: String,
    default: () => null
  },
  dictName: {
    type: String,
    default: () => null
  }
});

const emit = defineEmits(['success']);

const { formRef, validate } = useAntdForm();
const { createRequiredRule } = useFormRules();
const rules = {
  dictType: createRequiredRule('请输入字典编码'),
  dictLabel: createRequiredRule('请输入数据标签'),
  dictValue: createRequiredRule('请输入数据值')
};

const model = ref({
  dictType: null,
  dictLabel: null,
  dictValue: null,
  cssClass: null,
  dictSort: null,
  listClass: null,
  status: '0',
  remark: null
});

const listClassOptions = [
  {
    value: 'default',
    label: '默认'
  },
  {
    value: 'primary',
    label: '主要'
  },
  {
    value: 'success',
    label: '成功'
  },
  {
    value: 'info',
    label: '信息'
  },
  {
    value: 'warning',
    label: '警告'
  },
  {
    value: 'danger',
    label: '危险'
  }
];

async function submitForm() {
  if (!props.operateType) return;
  await validate();
  let pro;
  if (props.operateType === 'edit') {
    pro = updateDictItem({
      dictCode: props.currentRow.dictCode,
      ...model.value,
      dictName: props.dictName
    });
  } else {
    pro = addDictItem({
      ...model.value,
      dictName: props.dictName
    });
  }
  pro.then(({ error }) => {
    if (!error) {
      window?.$message?.success('操作成功!');
      emit('success');
    }
  });
}

watch(
  () => props.currentRow,
  val => {
    if (val) {
      const { dictType, dictLabel, dictValue, cssClass, dictSort, listClass, status, remark } = val;
      model.value = { dictType, dictLabel, dictValue, cssClass, dictSort, listClass, status, remark };
    } else {
      model.value = {
        dictName: null,
        dictType: null,
        status: '0',
        remark: null
      };
    }
  },
  {
    deep: true,
    immediate: true
  }
);

watch(
  () => props.dictType,
  val => {
    if (val) {
      model.value.dictType = val;
    }
  },
  {
    deep: true,
    immediate: true
  }
);

defineExpose({
  submitForm
});
</script>

<template>
  <AForm ref="formRef" :model="model" :rules="rules" :label-col="{ lg: 8, xs: 4 }" label-wrap>
    <ARow :gutter="20">
      <ACol :lg="24" :xs="24">
        <AFormItem name="dictType" label="字典类型" :label-col="{}">
          <AInput v-model:value="model.dictType" placeholder="请输入字典类型" autocomplete="off" disabled></AInput>
        </AFormItem>
      </ACol>
      <ACol :lg="24" :xs="24">
        <AFormItem name="dictLabel" label="数据标签" :label-col="{}">
          <AInput v-model:value="model.dictLabel" placeholder="请输入数据标签" autocomplete="off"></AInput>
        </AFormItem>
      </ACol>
      <ACol :lg="24" :xs="24">
        <AFormItem name="dictValue" label="数据键值" :label-col="{}">
          <AInput v-model:value="model.dictValue" placeholder="请输入数据键值" autocomplete="off"></AInput>
        </AFormItem>
      </ACol>
      <ACol :lg="24" :xs="24">
        <AFormItem name="cssClass" label="样式属性" :label-col="{}">
          <AInput v-model:value="model.cssClass" placeholder="请输入样式属性" autocomplete="off"></AInput>
        </AFormItem>
      </ACol>
      <ACol :lg="24" :xs="24">
        <AFormItem name="dictSort" label="显示顺序" :label-col="{}">
          <AInputNumber
            v-model:value="model.dictSort"
            placeholder="请输入显示顺序"
            class="w-full"
            autocomplete="off"
          ></AInputNumber>
        </AFormItem>
      </ACol>
      <ACol :lg="24" :xs="24">
        <AFormItem name="dictSort" label="回显样式" :label-col="{}">
          <ASelect v-model:value="model.listClass" placeholder="请选择回显样式">
            <ASelectOption v-for="item in listClassOptions" :key="item.value" :value="item.value">
              {{ item.label }}({{ item.value }})
            </ASelectOption>
          </ASelect>
        </AFormItem>
      </ACol>
      <ACol :lg="24" :xs="24">
        <AFormItem name="status" label="字典状态" :label-col="{}">
          <ARadioGroup v-model:value="model.status">
            <ARadio value="0">正常</ARadio>
            <ARadio value="1">停用</ARadio>
          </ARadioGroup>
        </AFormItem>
      </ACol>
      <ACol :lg="24" :xs="24" class="mt-15px">
        <AFormItem name="remark" label="备注" :label-col="{}">
          <ATextarea v-model:value="model.remark" placeholder="请输入备注" :rows="4" autocomplete="off" />
        </AFormItem>
      </ACol>
    </ARow>
  </AForm>
</template>

<style></style>
